<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }

        td,
        th {
            border: 1px solid #333;
        }

        thead tr {
            height: 40px;
            background-color: #ccc;
        }
    </style>

</head>

<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="tb">
            <tr>
                <td>魏璎珞</td>
                <td>JavaScript</td>
                <td>100</td>
                <td><a href="javascript:;">删除 </a></td>
            </tr>
            <tr>
                <td>弘历</td>
                <td>JavaScript</td>
                <td>98</td>
                <td><a href="javascript:;">删除 </a></td>
            </tr>
            <tr>
                <td>傅恒</td>
                <td>JavaScript</td>
                <td>99</td>
                <td><a href="javascript:;">删除 </a></td>
            </tr>
            <tr>
                <td>明玉</td>
                <td>JavaScript</td>
                <td>88</td>
                <td><a href="javascript:;">删除 </a></td>
            </tr>
            <tr>
                <td>大猪蹄子</td>
                <td>JavaScript</td>
                <td>0</td>
                <td><a href="javascript:;">删除 </a></td>
            </tr>
        </tbody>
    </table>
    <script>
        window.onload = function () {
            let trs = document.querySelectorAll('.tb tr')
            let tb = document.querySelector('.tb');
            // for (let i = 0; i < trs.length; i++) {
            //     let del = document.createElement('a');
            //     // console.log(del);
            //     del.innerHTML = `<a href="javascript:;" class="add">添加 </a>`
            //     trs[i].children[3].append(del);
            // }
            trs.forEach(function (ele) {
                let del = document.createElement('a');
                // console.log(del);
                del.innerHTML = `<a href="javascript:;" class="add">添加 </a>`
                ele.children[3].append(del);
            })
            let adds = document.querySelectorAll('.add');
            // console.log(adds);
            adds.forEach(function (ele, index) {
                ele.addEventListener('click', function () {
                    // console.log(trs[index]);
                    newTr = trs[index].cloneNode(true);
                    newTr.children[0].innerHTML += Math.random();
                    tb.append(newTr);
                })
            })





            // let add = document.querySelector('.add');
            // let tb = document.querySelector('tbody');
            // add.addEventListener('click', function () {
            //     let newtr = this.parentNode.parentNode.cloneNode(true);
            //     // console.log(newtr);
            //     newtr.children[0].innerHTML += Math.random();
            //     // console.log(newtr);
            //     tb.append(newtr);
            // })
        }
    </script>
</body>

</html>